<template>
   <div class="search">
   	<div class="search-box-wrapper">
   		<search-box ref="searchBox" @query="querychange"></search-box>
   	</div>
   	<div ref='shortcutWrapper' class="shortcut-wrapper" v-show="!query">
   		<scroll :refreshDelay="refreshDelay" class="shortcut" ref='shortcut' :data="shortcut">
      <div>
       <div class="hot-key">
          <h1 class="title mb20">热门搜索</h1>
          <ul>
            <li @click="addquery(item.k)" @delect="" class="hotitem" v-for="item in hotkey">
              <span>{{item.k}}</span>
            </li>
          </ul>
        </div>
        <div class="search-history"  v-show="searchHistory.length">
          <h1 class="search-title flex middle hui">
            <span class="l cell-main ">搜索历史</span>
            <i class="iconfont icon-lajixiang xl " @click='showConfirm'></i>
          </h1>
          <search-list @select="addquery" @delete="delectOne" :searches='searchHistory'></search-list>
        </div>
      </div>
   		</scroll>
   	</div>
   	<div ref='searchResult' class="search-result" v-show="query">
   		<suggest ref="suggest" @select='saveSearch' :query="query" @listScroll="blurInput"></suggest>
   	</div>
       <router-view></router-view>
       <confirm ref='confirm'
       text="是否清空所以搜索历史"
       confirmBtnText="清空" @confirm="clearSearchHistory"></confirm>
   </div>
</template>

<script type="text/ecmascript-6">
import searchBox from 'base/search-box/search-box';
import searchList from 'base/search-list/search-list';
import confirm from 'base/confirm/confirm';
import {getHotKey} from 'api/search';
import {ERR_OK} from 'api/config';
import scroll from 'base/scroll/scroll';
import suggest from 'base/suggest/suggest'
import {mapActions} from 'vuex';
import {playlistMixin,searchMixin} from 'common/js/mixin'
export default{
  name:'',
  mixins:[playlistMixin,searchMixin],
  created(){
this._getHotKey()
  },
  watch:{
    query(val){
      if(!val){
        setTimeout(()=>{
          this.$refs.shortcut.refresh()
        },20)
      }
    }
  },
    data(){
  	return{
hotkey:[],
  	}},
    computed: {
 shortcut() {
        return this.hotkey.concat(this.searchHistory)
      }
    },
  methods:{
    handlePlaylist(playlist){
      const bottom=playlist.length>0?'60px' : '';
      this.$refs.shortcutWrapper.style.bottom=bottom;
      this.$refs.searchResult.style.bottom=bottom;
      this.$refs.suggest.refresh()
    },
_getHotKey(){
	getHotKey().then((res)=>{
		if(res.code===ERR_OK){
			this.hotkey=res.data.hotkey.slice(0,10)
		}
	})
},
showConfirm(){
this.$refs.confirm.show()
},


...mapActions([
  'clearSearchHistory'
  ])
  },
  components:{searchBox,suggest,searchList,confirm,scroll}
}
</script>

<style rel="stylesheet" lang="less">
    .search-box-wrapper{
    	margin: 10px 20px;
    }
    .shortcut-wrapper{
    position: fixed;
    top: 150px;
    bottom: 0;
    width: 100%;
    }
    .shortcut{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }
    .hot-key{
    	margin: 10px 20px;
    }
    .title{
        font-size: 14px;
    color: rgba(255,255,255,0.5);
    }
    .hotitem{
    display: inline-block;
    padding: 5px 10px;
    margin: 0 20px 10px 0;
    border-radius: 6px;
    background: #333;
    font-size: 14px;
    color: rgba(255,255,255,0.3);
    }
    .search-history{
      position: relative;
      margin: 0 20px;
    }
    .search-title{
      height: 40px;
    }
</style>
